<template>
  <view class="donate-page">
    <!-- 捐赠统计 -->
    <view class="donate-stats">
      <view class="stats-item">
        <text class="stats-value">{{ totalAmount }}</text>
        <text class="stats-label">总捐赠金额</text>
      </view>
      <view class="stats-item">
        <text class="stats-value">{{ totalDonors }}</text>
        <text class="stats-label">捐赠人数</text>
      </view>
      <view class="stats-item">
        <text class="stats-value">{{ totalProjects }}</text>
        <text class="stats-label">捐赠项目</text>
      </view>
    </view>

    <!-- 捐赠记录列表 -->
    <view class="donate-records">
      <view class="section-title">捐赠记录</view>
      <view class="record-list">
        <view v-for="(record, index) in donationRecords" :key="index" class="record-item">
          <view class="donor-info">
            <view class="donor-name">{{ record.donorName }}</view>
            <view class="donor-amount">捐赠金额：¥{{ record.donationAmount }}</view>
          </view>
          <view v-if="record.donationMessage" class="donation-message">
            留言：{{ record.donationMessage }}
          </view>
          <view class="donation-time">{{ formatDate(record.donationTime) }}</view>
        </view>
      </view>
      <view v-if="hasMoreRecords" class="load-more" @click="loadMoreRecords">
        <text>加载更多</text>
      </view>
      <view v-else-if="donationRecords.length > 0" class="no-more">
        <text>没有更多数据了</text>
      </view>
      <view v-if="donationRecords.length === 0" class="empty">
        <text>暂无捐赠记录</text>
      </view>
    </view>

    <!-- 捐赠排行榜 -->
    <view class="donate-ranking">
      <view class="section-title">捐赠排行榜</view>
      <view class="ranking-list">
        <view v-for="(donor, index) in topDonors" :key="index" class="ranking-item">
          <view class="ranking-number" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</view>
          <image class="donor-avatar" :src="donor.avatar" mode="aspectFill" />
          <view class="donor-info">
            <view class="donor-name">{{ donor.name }}</view>
            <view class="donor-amount">捐赠金额：{{ donor.amount }}</view>
          </view>
          <view class="donor-date">{{ donor.date }}</view>
        </view>
      </view>
    </view>

    <!-- 捐赠说明 -->
    <view class="donate-guide">
      <view class="section-title">捐赠说明</view>
      <view class="guide-content">
        <view class="guide-item">
          <text class="guide-title">1. 捐赠方式</text>
          <text class="guide-text">支持微信支付、支付宝等多种支付方式</text>
        </view>
        <view class="guide-item">
          <text class="guide-title">2. 捐赠用途</text>
          <text class="guide-text">所有捐赠将用于宗祠修缮、文化传承等公益项目</text>
        </view>
        <view class="guide-item">
          <text class="guide-title">3. 捐赠证书</text>
          <text class="guide-text">捐赠后将获得电子捐赠证书，可下载保存</text>
        </view>
      </view>
    </view>

    <!-- 捐赠按钮 -->
    <!-- <view class="donate-button">
      <wd-button type="primary" block @click="showDonateModal">立即捐赠</wd-button>
    </view> -->

    <!-- 捐赠弹窗 -->
    <wd-popup v-model="showModal" position="bottom">
      <view class="donate-modal">
        <view class="modal-header">
          <text class="modal-title">选择捐赠项目</text>
          <wd-icon name="close" @click="showModal = false" />
        </view>
        <view class="modal-content">
          <view class="amount-list">
            <view
              v-for="(amount, index) in presetAmounts"
              :key="index"
              class="amount-item"
              :class="{ active: selectedAmount === amount }"
              @click="selectedAmount = amount"
            >
              {{ amount }}元
            </view>
            <view class="amount-item custom">
              <input
                v-model="customAmount"
                type="number"
                placeholder="其他金额"
                @input="handleCustomAmount"
              />
            </view>
          </view>
          <view class="donate-message">
            <input v-model="donateMessage" type="text" placeholder="请输入捐赠留言（选填）" />
          </view>
        </view>
        <view class="modal-footer">
          <wd-button type="primary" block @click="handleDonate">确认捐赠</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getDonationRecords, type DonationRecord } from "@/api/donation";

// 统计数据
const totalAmount = ref("¥1,234,567");
const totalDonors = ref(1234);
const totalProjects = ref(5);

// 捐赠记录相关数据
const donationRecords = ref<DonationRecord[]>([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const hasMoreRecords = ref(true);

// 加载捐赠记录
const loadDonationRecords = async (page = 1) => {
  try {
    uni.showLoading({ title: "加载中..." });
    const res = await getDonationRecords({
      pageNum: page,
      pageSize: pageSize.value,
    });
    if (page === 1) {
      donationRecords.value = res.list || [];
    } else {
      donationRecords.value = [...donationRecords.value, ...(res.list || [])];
    }
    total.value = res.total || 0;
    hasMoreRecords.value = donationRecords.value.length < total.value;
  } catch (error) {
    console.error("加载捐赠记录失败", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};

// 加载更多记录
const loadMoreRecords = () => {
  if (hasMoreRecords.value) {
    currentPage.value++;
    loadDonationRecords(currentPage.value);
  }
};

// 格式化日期
const formatDate = (dateStr: string): string => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
};

// 捐赠排行榜数据
const topDonors = ref([
  {
    name: "李某某",
    avatar: "/static/avatar.png",
    amount: "¥100,000",
    date: "2024-03-20",
  },
  {
    name: "李某某",
    avatar: "/static/avatar.png",
    amount: "¥80,000",
    date: "2024-03-19",
  },
  {
    name: "李某某",
    avatar: "/static/avatar.png",
    amount: "¥50,000",
    date: "2024-03-18",
  },
  {
    name: "李某某",
    avatar: "/static/avatar.png",
    amount: "¥30,000",
    date: "2024-03-17",
  },
  {
    name: "李某某",
    avatar: "/static/avatar.png",
    amount: "¥20,000",
    date: "2024-03-16",
  },
]);

// 捐赠弹窗相关
const showModal = ref(false);
const selectedAmount = ref(0);
const customAmount = ref("");
const donateMessage = ref("");
const presetAmounts = [100, 500, 1000, 2000, 5000];

// 显示捐赠弹窗
const showDonateModal = () => {
  showModal.value = true;
};

// 处理自定义金额输入
const handleCustomAmount = (e: { detail: { value: string } }) => {
  const value = e.detail.value;
  if (value) {
    selectedAmount.value = 0;
  }
};

// 处理捐赠
const handleDonate = () => {
  const amount = selectedAmount.value || Number(customAmount.value);
  if (!amount) {
    uni.showToast({
      title: "请选择或输入捐赠金额",
      icon: "none",
    });
    return;
  }

  // TODO: 调用支付接口
  uni.showLoading({
    title: "处理中...",
  });

  setTimeout(() => {
    uni.hideLoading();
    showModal.value = false;
    uni.showToast({
      title: "捐赠成功",
      icon: "success",
    });
    // 刷新捐赠记录
    currentPage.value = 1;
    loadDonationRecords(1);
  }, 1500);
};

// 页面加载时获取数据
onMounted(() => {
  loadDonationRecords();
});
</script>

<style lang="scss">
.donate-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.donate-stats {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .stats-item {
    text-align: center;

    .stats-value {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #1989fa;
      margin-bottom: 10rpx;
    }

    .stats-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 2rpx;
}

.donate-records {
  margin-bottom: 20rpx;

  .record-list {
    background-color: #fff;
    padding: 20rpx;
  }

  .record-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .donor-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .donor-name {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
      }

      .donor-amount {
        font-size: 28rpx;
        color: #1989fa;
      }
    }

    .donation-message {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 10rpx;
    }

    .donation-time {
      font-size: 24rpx;
      color: #999;
      text-align: right;
    }
  }

  .load-more,
  .no-more,
  .empty {
    text-align: center;
    padding: 20rpx;
    font-size: 26rpx;
    color: #999;
    background-color: #fff;
  }

  .load-more {
    color: #1989fa;
  }
}

.ranking-list {
  background-color: #fff;
  padding: 20rpx;

  .ranking-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .ranking-number {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 50%;
      margin-right: 20rpx;
      font-size: 24rpx;
      color: #666;

      &.top-three {
        background-color: #1989fa;
        color: #fff;
      }
    }

    .donor-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .donor-info {
      flex: 1;

      .donor-name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 6rpx;
      }

      .donor-amount {
        font-size: 24rpx;
        color: #1989fa;
      }
    }

    .donor-date {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.guide-content {
  background-color: #fff;
  padding: 20rpx;

  .guide-item {
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .guide-title {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 10rpx;
    }

    .guide-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

.donate-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.donate-modal {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .modal-content {
    .amount-list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10rpx;
      margin-bottom: 30rpx;

      .amount-item {
        width: calc(33.33% - 20rpx);
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        margin: 10rpx;
        font-size: 28rpx;
        color: #333;

        &.active {
          background-color: #1989fa;
          color: #fff;
        }

        &.custom {
          input {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 28rpx;
          }
        }
      }
    }

    .donate-message {
      input {
        width: 100%;
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        font-size: 28rpx;
      }
    }
  }

  .modal-footer {
    margin-top: 30rpx;
  }
}
</style>
